<script setup lang="ts">
import { nextTick, ref } from 'vue'
const enableChildScroll = ref(false)
	const handleParentScroll = (e) => {
		// console.log(e.detail.scrollTop)
		if (e.detail.scrollTop > 150) {
			enableChildScroll.value = true
		}
	}
	const parentScrollTop = ref(0)
	
	const handleScrolltolower = () => {
		enableChildScroll.value = false
		console.log('到底部了')
	}
	const handleScrolltoupper = () => {
		enableChildScroll.value = false
		console.log('到部了')
	}
</script>
<template>
	<scroll-view class="father" :scroll-y="true" @scroll="handleParentScroll" :scroll-top="parentScrollTop" @scrolltolower="handleScrolltolower" @scrolltoupper="handleScrolltoupper">
		<view class="container"></view>
		<view class="container"></view>
		<view class="container"></view>
		<view class="child" v-if="!enableChildScroll">
			<view class="child-container" v-for="i in 40">{{i}}</view>
		</view>
		<scroll-view class="child" :scroll-y="enableChildScroll" v-else>
			<view class="child-container" v-for="i in 40">{{i}}</view>
		</scroll-view>
	</scroll-view>
</template>
<style scoped lang="scss">
	.father {
		height: 100vh;
		background-color: green;
		display: flex;
		flex-direction: column;
	}
	.container {
		height: 300rpx;
		background-color: blue;
	}
	.child {
		height: calc(100vh - 600rpx);
		background-color: green;
	}
	.child-container {
		height: 200rpx;
		background-color: yellow;
	}
</style>
